<html>

<head>
    <title>OpenStreetMap Base Layer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../dist/og.js"></script>
    <link rel="stylesheet" href="../../dist/og.css" type="text/css" />
</head>
<body>
    <div id="earth" style="width:100%;height:100%" />
    <script type='text/javascript'>
        let osm = new og.layer.XYZ("OSM", {
            'specular': [0.0003, 0.00012, 0.00001],
            'shininess': 20,
            'diffuse': [0.89, 0.9, 0.83],
            'isBaseLayer': true,
            'url': "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
            'visibility': true,
            'attribution': 'Data @ OpenStreetMap contributors, ODbL'
        });

        let globe = new og.Globe({
            'name': "Earth",
            'target': "earth",
            'terrain': new og.terrain.GlobusTerrain(),
            'layers': [osm]
        });
    </script>
</body>

</html>